<html>
<head>
<title>Trivial HTML5</title>
<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script language="javascript" src="processing-dgfix.js"></script>
<script>
//set your limits here
var xmin = -10, xmax = 10, ymin = -5, ymax = 5;
var points;
var showGrid = true;
var yValues = new Array();
var derivatives = new Array();

//-------------------  Listeners ---------------------------
    //had to add the listeners with javascript
    //because it's not currently possible to reference processing methods from the html
    
    //reset the graph to 0
    function reset() {
      for (var i = 0; i < points; i++) {
        yValues[i] = 0.5;
        derivatives[i] = 0;
      }
    }
    
    //toggle grid
    function toggleGrid() {
      showGrid = !showGrid;
    }
    
    //smooth the current graph 
    function smooth() {
      var newPoints = new Array(points);
      for (var i = 0; i < points; i++) {
        var sum = 0.3 * yValues[i];
        sum += 0.2 * (i > 0? yValues[i-1] : yValues[i]);
        sum += 0.2 * (i < points-1? yValues[i+1] : yValues[i]);
        sum += 0.1 * (i > 1? yValues[i-2] : yValues[i]);
        sum += 0.1 * (i < points - 2? yValues[i+2] : yValues[i]);
        sum += 0.05 * (i > 2? yValues[i-3] : yValues[i]);
        sum += 0.05 * (i < points - 3? yValues[i+3] : yValues[i]);
        newPoints[i] = sum;
      }
      yValues = newPoints;
    }
    
    //grab points from graph and print
    function getPoints() {
      var temp = "";
      for(var i = 0; i < points; i++){
        temp += xmin + i*(xmax-xmin)/(points-1) + " ";
        temp += ymin + yValues[i]*(ymax - ymin) + " ";
        var dx = 1.0/points * (xmax - xmin);
        if (i == 0)
          temp += (yValues[1] - yValues[0])*(ymax-ymin)/dx + "\n";
        else if (i == points-1)
          temp += (yValues[points-1] - yValues[points-2])*(ymax-ymin)/dx + "\n";
        else {
          var i = i;
          var left = Math.abs(yValues[i] - yValues[i-1]);
          var right = Math.abs(yValues[i+1] - yValues[i]);
          if (left < 1e-20 || right < 1e-20)
            temp += 0 + "\n";
          else
            temp += ((1/right)*(yValues[i+1]-yValues[i]) - (1/left)*(yValues[i]-yValues[i-1]))/(2*dx*((1/right)+(1/left))) + "\n";
        }
      }
      $('#pointDisplay').val(temp);
    }
    
    //load points from y-values
    function setPoints() {
      var tempString = $('#points').val();
      var tempPoints = tempString.split(',');
      var vals = new Array(tempPoints.length);
      for(var i = 0; i < tempPoints.length; i++){
        vals[i] = parseInt(tempPoints[i]);
      }
      points = vals.length;
      yValues = new Array(points);
      derivatives = [points];
      for (var i = 0; i < points; i++)
        yValues[i] = 0.5;
      for (var i = 0; i < vals.length; i++) {
        if (vals[i] > ymax)
          yValues[i] = 1;
        else if (vals[i] < ymin)
          yValues[i] = 0;
        else
          yValues[i] = (vals[i]-ymin)/(ymax-ymin);
      }
    }
</script>
</head>
<body>

<canvas data-src="SketchGraph.pjs" id="cv" width="200" height="200"></canvas>  
<br/>
<p>
Y-values: 
<input type="text" id="points" size=50 ></input>
<button type="button" id="setPts" onClick="setPoints();">Set</button>
<br><br>

<button type="button" id="hideGrid" onClick="toggleGrid();">Toggle Grid</button>
<button type="button" id="reset" onClick="reset();">Reset to Zero</button>
<button type="button" id="smooth" onClick="smooth();">Smooth</button>
<br><br>
<button type="button" id="getPts" onClick="getPoints();">Get Points</button><br/>
<textarea id="pointDisplay" rows=10 cols=60></textarea>
</p>

</body>
</html>
